<template>
    <div class="common-layout">
      <el-container>
        <el-header height="25%">
          <el-page-header :icon="null" @back="backout">
    <template #content>
      <div class="flex items-center">

        <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          收藏管理
        </span>
        <el-tag>admin</el-tag>
        <el-button style="margin-left: 16px" @click="drawer = true">
              统计管理
            </el-button>
            <el-drawer size=50% v-model="drawer" title="I am the title" :with-header="false" direction="btt">
              <span>    
                <el-row>
                <EchartsChart></EchartsChart>
                <EchartsChart1></EchartsChart1>
                <EchartsChart2></EchartsChart2>
                <EchartsChart3></EchartsChart3>
                </el-row>
              </span>
            </el-drawer>
      </div>
    </template>
    <template #extra>
      <div class="flex items-center">
        <el-space :size="size" :spacer="spacer">
          <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Admin
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @beathub.com
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            生产队的驴正在加紧赶工......
          </p>
        </div>
      </template>
    </el-popover>
      </el-space>
        <el-button type="danger" plain class="ml-2" @click="logout">退出</el-button>
      </div>
    </template>
  </el-page-header>
  <el-divider content-position="right">管理员操作</el-divider>
  <div class=box>    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="作品名称">
      <el-input v-model="formInline.workname" placeholder="作品名称模糊查询" clearable />
    </el-form-item>
    <el-form-item>
    <el-button type="danger" @click="btnQuery"><i class="iconfont icon-chaxun"></i></el-button>
    </el-form-item>
   </el-form>
    </div>
  </el-header>
    <!-- 此为用户信息管理头部 -->
        <el-main>
        <!-- 页面主体显示内容 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="uid" label="用户名" width="250">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>用户id: {{ scope.row.uid }}</div>
              <div>联系方式: {{ scope.row.phone }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.uname }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="作品名称" width="250">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.workname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="作品类别" width="250">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.worksort}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收藏日期" sortable width="250">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.create_date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button   size="small" @click="detailDialog(scope.row.collectid)"
          ><i class="iconfont icon-chakan"></i></el-button
        >
          <el-popconfirm
        confirm-button-text="是"
        cancel-button-text="否"
        :icon="InfoFilled"
        icon-color="#626AEF"
        title="你确定要删除吗?"
        @confirm="deleteClick(scope.row.uid)"
        >
    <template #reference>
      <el-button type="danger" size="small" @click="deleteClick"><i class="iconfont icon-lajitong"></i></el-button>
      </template>
  </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
   <!-- 分页 -->
   <div class="table-page">
   <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5,10,20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes,prev, pager, next, jumper"
      :total="pageInfo.total"  
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
      <el-dialog
    v-model="detailDialogVisible"
    title="查看收藏信息"
    width="60%"
  >
  <el-descriptions :column="1" border>
    <el-descriptions-item label="用户名">{{ collectInfo.uname }}</el-descriptions-item>
    <el-descriptions-item label="作品名称">{{ collectInfo.workname }}</el-descriptions-item>
    <el-descriptions-item label="收藏id">{{ collectInfo.collectid }}</el-descriptions-item>
    <el-descriptions-item label="收藏类别">{{ collectInfo.worksort }}</el-descriptions-item>

  </el-descriptions>
  </el-dialog>
        </el-main>
      </el-container>
    </div>
   </template>
  
   <script>
   import { ElMessage } from 'element-plus'
   //import { Timer } from '@element-plus/icons-vue'
   import { ArrowLeft } from '@element-plus/icons-vue'
   //import { de } from 'element-plus/es/locale'
   import { ref } from 'vue'
   import { h } from 'vue'
   import { ElDivider } from 'element-plus'
   import EchartsChart from './components/VideoCollect.vue'
   import EchartsChart1 from './components/MusicCollect.vue'
   import EchartsChart2 from './components/ScoreCollect.vue'
   import EchartsChart3 from './components/TextCollect.vue'
   const input = ref('')
 
   export default{
    setup() {
      const size = ref(50)
      const spacer = h(ElDivider, { direction: 'vertical' })

      // 在这里可以进行其他的逻辑设置

      return {
        size,
        spacer,
        // 其他需要暴露给模板的属性
      }
    },
    components:{
    EchartsChart,
    EchartsChart1,
    EchartsChart2,
    EchartsChart3
  }, 

     data() {
      
       return {
        drawer: ref(false),
         formInline: {
           workname: "",
           collectid:"0"
         },
         form: {},
         detailDialogVisible: false, //详情对话框
         tableData: [],
         collectInfo:{},
         collectInfoData: [],
         pageInfo:{},   //分页信息对象
          pageSize:5,    //当前页条数
          currentPage:1,  //当前页号
       }
     },
     mounted() {
       this.LoadData()           //加载点赞信息
       this.LocalCollectInfoData() 
       this.getPageData(1,5)

     },
     methods: {
      center(){
      this.$router.push('admincenter')
    },
    logout() {
      this.$router.push('/');
    },
    backout() {
      this.$router.push('/welcome');
    },
      handleSizeChange(pageSize) {   //选择每一页显示的记录数
         this.pageSize = pageSize
         this.getPageData(this.currentPage, this.pageSize)
         console.log("size:", pageSize);
       },
       handleCurrentChange(pageNum) {  //切换页号时得到当时页号
         this.currentPage = pageNum
         this.getPageData(this.currentPage, this.pageSize)
         console.log("num:", pageNum);

       },
       getPageData(num, size) {   //得到分页数据
         this.$http.get("http://localhost:8080/collect/pages", { params: { pageNum: num, pageSize: size } }).then((response) => {
           this.pageInfo = response.data
           this.tableData = this.pageInfo.list
         })
       },

       btnQuery() {
         console.log(this.formInline)
         this.LoadData()
       },
       LocalCollectInfoData(){  //加载用户信息数据
        this.$http.get("http://localhost:8080/collect/list").then((res)=>{
        this.collectInfoData = res.data;
        console.log(res.data);
      }).catch((err)=>{
        console.log(err);
      })
      },
       LoadData() {              //重加载数据
         this.$http.get("http://localhost:8080/collect/list?workname=" + this.formInline.workname).then((res) => {
           this.tableData = res.data;
           this.pageInfo.total = res.data.length;
           console.log(res.data);
         }).catch((err) => {
           console.log(err);
         })
       },
       deleteClick(collectid) {    //删除操作
         console.log(collectid);
         this.$http.get("http://localhost:8080/collect/del/" + collectid).then((res) => {
           console.log(res.data);
           if (res.data == 1) {
             console.log("删除成功");
             this.LoadData()
             ElMessage({
               message: '删除成功',
               type: 'success',
             })
           } else {
             console.log("删除失败");
             this.LoadData()
             ElMessage({
               message: '删除失败',
               type: 'warning',
             })
           }
         }).catch((err) => {
           // console.log(err);
         })
       },
       detailDialog(collectid) {   //详情操作
         console.log(collectid);
         this.$http.get("http://localhost:8080/collect/get/" + collectid).then((res)=>{
          console.log(res.data)
          this.collectInfo = res.data
         }).catch((err)=>{
           console.log(err);
         })
         this.detailDialogVisible = true
       }
     }
   }


   </script>
<style>
.input-width {
  width: 40%;
  /* 设置宽度为100% */
  resize: none;
  /* 禁止调整大小 */
}

.box {
  position: relative;
  top: 20px;
}
.table-page{
  float:right;
  margin:12px
  }
  </style>